<template>
  <div class="search">
    <f-drawer ref="processInstanceDrawer" :title="title" width="50%" @visibleChange="visibleChange">
      <a-tabs @tabClick="tabClick" v-model="activeName">
        <a-tab-pane tab="审批意见" key="form1">
          <process-comment ref="form1" v-if="drawerVisible"></process-comment>
        </a-tab-pane>
        <a-tab-pane tab="流程表单" key="form2">
          <div v-if="generateStartFormVisible">
            <k-form-build ref="dynamicForm" :value="formJson" :default-value="variables"/>
          </div>
        </a-tab-pane>
        <a-tab-pane tab="任务列表" key="form3">
          <process-instance-task ref="form3" v-if="drawerVisible"></process-instance-task>
        </a-tab-pane>
        <a-tab-pane tab="实例信息" key="form4">
          <process-instance-details ref="form4" v-if="drawerVisible"></process-instance-details>
        </a-tab-pane>
      </a-tabs>
    </f-drawer>
  </div>
</template>

<script>

  import api from './js/api'
  import ProcessComment from '../components/processDetails/processComment'
  import ProcessInstanceTask from './processInstance_task'
  import ProcessInstanceDetails from './processInstance_details'

  export default {
    name: 'ProcessInstanceDrawer',
    components: { ProcessInstanceDetails, ProcessInstanceTask, ProcessComment },
    data() {
      return {
        api: Object.assign(api, this.api),
        drawerVisible: false,
        activeName: 'form1',
        forms: [
          'form1',
          'form2',
          'form3',
          'form4'
        ],
        comments: [],
        processInstance: {},
        title: '查看详情',
        imagePath: '',
        isShowProcessInstanceForm: false,
        generateStartFormVisible: false,
        formJson: undefined,
        variables: undefined,
        showBusinessKey: false,
        businessKey: undefined
      }
    },
    created() {

    },
    methods: {

      handleShow(data) {
        this.processInstance = data
        this.$refs['processInstanceDrawer'].show()
        this.tabClick('form1')
      },
      tabClick(name) {
        this.activeName = name
        if (name == 'form1' || name == 'form3'|| name == 'form4') {
          this.$nextTick(() => {
            this.$refs[this.activeName].setData(this.processInstance)
          })
        }
        if (name == 'form2') {
          this.showProcessInstanceForm()
        }
      },
      visibleChange(drawerVisible) {
        this.drawerVisible = drawerVisible
      },
      showProcessInstanceForm() {
        if (!this.isShowProcessInstanceForm) {
          this.http.get(this, {
            url: this.api.processInstance.formData,
            params: {
              processInstanceId: this.processInstance.id
            },
            success: function(me, data) {
              me.showBusinessKey = data.showBusinessKey
              me.businessKey = data.businessKey
              if (data && data.renderedStartForm) {
                me.formJson = JSON.parse(data.renderedStartForm)
                me.variables = JSON.parse(data.variables.processInstanceFormData)
                me.generateStartFormVisible = true
              }

              me.isShowProcessInstanceForm = true
            }
          })
        }
      }
    }
  }
</script>

